<script setup>
import { ref } from "vue";
// 路由
import { useRouter, useRoute } from 'vue-router'
// 获取路由信息
const route = useRoute()
const tabPosition = ref("left")
// 用户名
const reName = ref('')
// 用户ID
const userID = ref(route["params"].id)
// 原密码
const OldPasswd = ref('')
// 新密码
const NewPasswd = ref('')
// 图片标题
const imgName = ref('')
// 请求用户信息 start
let userInfo = ref(null)

fetch("http://localhost/test-7/pixiv-userinfo.php", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        uid: userID.value,
    }),
})
    .then((res) => res.json())
    .then((json) =>
        userInfo.value = json
    )
// 请求用户信息 end
// 更改用户名 start
function submitReName() {
    fetch("http://localhost/test-7/pixiv-rename.php", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            uid: userID.value,
            name: reName.value,
            token: `${userID.value}${userInfo.value.name}${userInfo.value.email}`,
        }),
    })
        .then((response) => response.json())
        .then((data) => {
            console.log(data)
        })
}
// 更改用户名 end
// 修改密码 start
function submitFormPasswd() {
    fetch("http://localhost/test-7/pixiv-repasswd.php", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            uid: userID.value,
            oldpasswd: OldPasswd.value,
            newpasswd: NewPasswd.value,
            token: `${userID.value}${userInfo.value.name}${userInfo.value.email}`,
        }),
    })
        .then((response) => response.json())
        .then((data) => {
            console.log(data)
        })
}

// 修改密码 end
// 上传文件 start
function fileUplode() {
    const formData = new FormData();
    const fileField = document.querySelector('input[type="file"]');
    formData.append('uid', userID.value);
    formData.append('imgtopic', imgName.value);
    formData.append('token', `${userID.value}${userInfo.value.name}${userInfo.value.email}`);
    formData.append('file', fileField.files[0]);
    fetch('http://localhost/test-7/pixiv-uploader.php', {
        method: 'POST',
        body: formData
    })
        .then(response => response.json())
        .then(result => {
            console.log('Success:', result);
        })
}
// 上传文件 end
</script>

<template>
    <!-- <h1>User 页面</h1> -->
    <!-- 获取ID -->
    <!-- <p>{{ $route.params.id }}</p> -->
    <el-tabs :tab-position="tabPosition" class="demo-tabs" v-if="userInfo">
        <el-tab-pane label="个人中心">
            <el-row class="p50">
                <el-col>
                    <span>UID：</span>
                    <span>{{ userID }}</span>
                </el-col>
                <el-col>
                    <span>头像</span>
                    <img
                        src="https://woniuimage.oss-cn-hangzhou.aliyuncs.com/woniuimage/user/icon/user-icon-default.png">
                </el-col>
                <el-col :span="2">用户名：</el-col>
                <el-col :span="8">
                    <el-input v-model="reName" :placeholder="userInfo['name']" />
                </el-col>
                <el-col>
                    <el-button type="warning" @click="submitReName()">保存</el-button>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="我的上传" v-if="userInfo['position'] == 1">我的上传</el-tab-pane>
        <el-tab-pane label="上传图片" v-if="userInfo['position'] == 1">
            <el-row class="p50">
                <el-col :span="2">图片标题：</el-col>
                <el-col :span="8">
                    <el-input v-model="imgName" placeholder="请输入图片标题" />
                </el-col>
                <el-col><input type="file" class="p30-urd"></el-col>
                <el-col><button @click="fileUplode()">上传</button></el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="修改密码">
            <el-row class="p50">
                <el-col :span="2">原密码：</el-col>
                <el-col :span="8">
                    <el-input v-model="OldPasswd" placeholder="原密码" />
                </el-col>
            </el-row>
            <el-row class="p30">
                <el-col :span="2">新密码：</el-col>
                <el-col :span="8">
                    <el-input v-model="NewPasswd" placeholder="新密码" />
                </el-col>
                <el-col>
                    <el-button type="warning" @click="submitFormPasswd()">确定</el-button>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="退出登录">退出登录</el-tab-pane>
    </el-tabs>
</template>

<style lang="css">
.p50 {
    padding: 30px;
}

.p30 {
    padding: 0 0 30px 30px;
}

img {
    vertical-align: middle;
    padding: 0 0 30px 30px;
}

.p30-urd {
    padding: 30px 0 30px 0;
}
</style>